<!DOCTYPE html>
<html>
<head>
    <!-- 网页编码格式等的设置 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>高德地图AOI数据抓包辅助页面</title>
    <style>
        /* 网页全局格式设置 */
        #header{
            text-align: right;
        }
        h2 {
            color: lightslategray;
            font-size: large;
        }
        h3 {
            color: royalblue;
            font-size: medium;
        }
        p {
            font-size: small;
        }
        .Guide{
            text-align: right;
            position: relative;
            color: #90a4ae;
            display: inline-block;
        }
        #Remind{
            width:100%;
            height: 100px;
        }
        .Guide {
            position: relative;
            top: -70px;
            right: -60px;
            display: inline-block;
            margin: 4em;
            color: darkorange;
        }
        .Guidance {
            position: relative;
            top: -2em;
            left: 50%;
            display: none;
            white-space: nowrap;
            transform: translate(-50%, 0);
            background-color: white;
            font-size: small;
            text-align: left;
        }
        .Guide:hover .Guidance {
            display: block;
        }

        /* 网页布局 */
        * {
            box-sizing: border-box;
        }
        .box {
            float: right;
            width: 50%;
            height: 200px;
            padding: 5px;
        }
        /*.clearfix::after {
            content: "";
            clear: both;
            display: table;
        }*/
        .box2 {
            float: left;
            width: 33.3%;
        }
        #GaodeMapFrame {
            position: absolute;
            top: 205px;
            left: 0;
            z-index: -1;
            bottom: 0;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <!--读取本地文件控件-->
<div class="box" id="header">
    <h1 style="color: #0f89f5">高德地图AOI数据抓包辅助页面</h1>
    <p style="color: #90a4ae">AOI（Area of Interest，POI数据的边界数据）</p>
    <p>版本号20210418，数据获取不易，科研道路许多愁<br>有限技术支持：sidchen0@qq.com</p>
    <div class="Guide">使用说明
        <div class="Guidance">
        1. 确定要获取边界的POI名称（爬取、地图搜索皆可）<br>
        2. 安装并运行Fiddler软件，开启抓包（capture）<br>
        * （首次安装需要管理员身份运行，并在右上角设置-HTTPS中点击“trust https root”）<br>
        3. 在地图中搜索并点选目标数据（地图需显示选中边界区域）<br>
        4. 完成区域选择后，在Fiddler中筛选目标数据，然后导出（保存格式为Raw File）<br>
        * （header筛选地址：ditu.amap.com/detail/get）<br>
        5. 使用提供的FormatAOIData程序处理导出文件<br>
        * （FormatAOIData程序需与导出文件夹在同一目录下（会自动定位到get文件夹下的detail文件，即储存各个AOI数据的文件）
        </div>
    </div>
</div>
<div class="box" id="Assist">
    <h2>AOI数据获取辅助</h2>
    <p>用于辅助读取本地含POI名称的txt文件，点击“下一个”将逐一把名称复制到剪切板，在地图搜索框中直接粘贴即可</p>
    <div class="box2">
        <h3>1. 选择AOI名称文件</h3>
        <input type="file" id="files"/>
        <input type="button" value="读取结果" onclick="result()"/>
        <input type="text" id="AOIResult" value="" style="width: 60%;border-style: none;"/>
    </div>
    <div class="box2">
        <h3>2. 人工点选AOI范围</h3>
        <input type="button" id="NextAOI" value="下一个" onclick="search_AOI()"/>
        <input type="button" id="Refresh" value="刷新地图" onclick="refresh()"/>
        <script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js"></script>
        <input type="button" id="Export" value="导出剩余" onclick="leftover()"/>
        <p style="font-size: x-small;color: gray">访问被终止可刷新或导出剩余至其他浏览器</p>
    </div>
    <div class="box2">
        <!--<input type="text" id="Remind" value=""/>-->
        <textarea id="Remind" name="Console" rows="3"></textarea>
    </div>
<script>
    //读取本地数据
    var inputElement = document.getElementById("files");
    inputElement.addEventListener("change", handleFiles, false);
    var names=[];//读取公交线路名称列表，并储存为数组
    var totalnum;
    var aoi_null = 0;
    function handleFiles() {
        var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
        var name = selectedFile.name;//读取选中文件的文件名
        var size = selectedFile.size;//读取选中文件的大小
        console.log("文件名:"+name+"大小："+size+'kb');
        var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
        reader.readAsText(selectedFile,'utf-8');//读取文件的内容
        reader.onload = function(){
            console.log("文件读取成功");//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
            getnames(this.result);
        }
    }
    function getnames(result){
        var rows=result.split('\n');
        for(var i=0;i<rows.length;++i) {
            let aoi = (rows[i]+'2').substr(0,rows[i].length);
            if (aoi.length !== 0){
                names.push(aoi);// 储存AOI名称，所有的处理都是将该数据转为字符串
            }else{
                aoi_null += 1
            }
            totalnum=names.length-aoi_null;
        }
    }
    //返回线路文件读取结果
    function result(){
        document.getElementById("AOIResult").setAttribute("value", totalnum+'个AOI名称，空'+aoi_null+'行');
    }
    //将后台读取的AOI名称逐一输入地图搜索框，并搜索
    var i=-1
    function search_AOI(){
        i+=1
        copyToClip(names[i])
        if (names.length === i && names.length !== 0){
            textlog("已全部获取！");
        }else if (names.length === 0){
            textlog("请加载AOI名称文件")
        }else{
            textlog(names[i]+'\n已复制到剪切板，剩余：'+(names.length-i)+'个')
        }
    }
    //将内容输出到网页中的文本框中
    function textlog(content){
        document.getElementById("Remind").value=content;
    }
    /*
     * 复制内容到粘贴板
     * content : 需要复制的内容
     * message : 复制完后的提示，不传则默认提示"复制成功"
     * 代码来自：https://blog.csdn.net/sunnyzyq/article/details/85065022
     */
    function copyToClip(content) {
        var aux = document.createElement("input");
        aux.setAttribute("value", content);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
    }

    //刷新高德地图
    function refresh(){
        document.getElementById('GaodeMap').src="https://ditu.amap.com/";
    }

    // 导出剩余数据
    var button = document.getElementById("Export");
    button.addEventListener("click",saveHandler, false);
    function saveHandler(){
        let j;
        const content = [];
        for (j = i+1;j < (names.length+1);j++){
            content.push(names[j]+'\n')
        }
        const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        saveAs(blob, "Leftover.txt");
        textlog('将导出：'+content.length+'个剩余AOI名称')
    }
</script>
</div>
<div id="GaodeMapFrame">
    <iframe src="https://ditu.amap.com/" id="GaodeMap" style="width: 100%; height: 100%;">
    </iframe>
</div>
</body>
</html>